<template>
  <div>
    <div>
      <searchcu @search="search" @back="back" @addcu="addcu"/>
    </div>
    <div>
      <Table stripe border :columns="columns1" :data="datas" height="770">
        <template slot-scope="{ row }" slot="name"
          ><strong>{{ row.name }}</strong></template
        >
        <template slot-scope="{ row }" slot="sex">{{
          row.sex | bpos
        }}</template>
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="Change(index,row)"
            >修改</Button
          >
          <!-- <Button
        type="primary"
        size="small"
        style="margin-right: 5px"
        @click="Remove(index)"
        >删除</Button
      > -->
        </template>
      </Table>
    </div>
    <Updatecu :flag="open" :datas="rowdata" @sucess="sucess" @changes="changes"/>
  </div>
</template>
<script>
import searchcu from "./saleform/searchcu.vue";
import Updatecu from './saleform/updatecu.vue';
export default {
  data() {
    return {
      open:false,
      rowdata:{},
      columns1: [
        {
          title: "顾客ID",
          key: "cid",
          align: "center",
        },
        {
          title: "名字",
          key: "name",
          slot: "name",
          align: "center",
        },
        {
          title: "电话",
          key: "phone",
          align: "center",
        },
        {
          title: "性别",
          key: "sex",
          slot: "sex",
          align: "center",
          filters: [
            {
              label: "男性",
              value: 1,
            },
            {
              label: "女性",
              value: 0,
            },
          ],
          filtersMultiple: false,
          filterMethod(value, row) {
            if (value == 1) {
              return row.sex == true;
            } else if (value == 0) {
              return row.sex == false;
            }
          },
        },
        {
          title: "地址",
          key: "address",
          align: "center",
        },
        {
          title: "action",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data1: [],
      datas: [],
      index:""
    };
  },
  filters: {
    bpos: function (value) {
      if (value == true) {
        return "男";
      } else {
        return "女";
      }
    },
  },
  mounted() {
    this.axios
      .get("/api/customer")
      .then((r) => {
        this.data1 = r.data;
        this.datas = this.data1;
      })
      .catch((e) => {
        this.$Message.error("e" + e);
      });
  },
  components: {
    searchcu,
    Updatecu,
  },
  methods: {
    search(d) {
      this.axios
        .get("/api/customer", { params: { param: d } })
        .then((r) => {
          this.datas = r.data;
        })
        .catch((e) => {
          this.$Message.error("e" + e);
        });
    },
    back(){
        this.datas=this.data1
    },
    addcu(data){
      var address=""
      if(data.address.length==2) address=data.address[0]+'-'+data.address[1]
      else address=data.address[0]+'-'+data.address[1]+'-'+data.address[2]
      data.address=address
      this.axios.post('/api/customer',data).then((r)=>{
        this.$Message.info(r.data)
        if(r.data=="添加成功"){
          this.data1.push(data)
          // this.datas.push(data)
        }
      }).catch((e)=>{
        this.$Message.error("e"+e)
      })
    },
    Change(index,row){
      this.open=true
      this.index=index
      // var address=row.address.split("-")
      // row.address=address
      var dt=JSON.parse(JSON.stringify(row))
      if(dt.sex){
          dt.sex="true"
      }else{
        dt.sex="false"
      }
      this.rowdata=dt
      
    },
    sucess(data){
      // this.data1.splice(index,1,data)
      
      this.datas.splice(this.index,1,data)
    },
    changes(){
      this.open=false
    }
  },
};
</script>
